import usePathKey from "@/hooks/usePathKey";
import { useAppSelector } from "@/store";
import { selectUserMenus } from "@/store/slice/app";
import { Menu, MenuProps } from "antd";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

function GlobalMenu() {
  const [current, setCurrent] = useState("");
  const menus = useAppSelector(selectUserMenus);
  const Navigate = useNavigate();
  const path_key = usePathKey();

  useEffect(() => {
    if (path_key) {
      setCurrent(path_key);
    }
  }, []);

  const onClick: MenuProps["onClick"] = ({ key }) => {
    const activeKey = key;
    setCurrent(activeKey);
    Navigate(activeKey);
  };

  return (
    <Menu
      onClick={onClick}
      theme="dark"
      mode="horizontal"
      selectedKeys={[current]}
      items={menus}
      style={{ flex: 1, minWidth: 0 }}
    />
  );
}
export default GlobalMenu;
